<template>
    <div class="f-c-c h100">
        <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="用户名" prop="account">
    
      <el-input v-model="ruleForm.account"  disabled/>
    </el-form-item>
    <el-form-item label="角色" prop="userGroup" >
       
      <el-input v-model="ruleForm.userGroup"  disabled/>
    </el-form-item>
    <el-form-item label="头像" prop="imgUrl">
       
        <el-upload
    class="avatar-uploader"
    action="http://jacklv.cn/users/uploadProfile"
    :headers="{
        token
    }"
   
    name="avatar"
    :on-success="handleAvatarSuccess"
 
  >
    <img v-if="ruleForm.imgUrl" :src="`http://jacklv.cn/images/${ruleForm.imgUrl}`" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
     </el-form-item>
    
    <el-form-item>
      <el-button :loading="loading" type="primary" @click="submitForm(ruleFormRef)">
        上传
      </el-button>
    
    </el-form-item>
  </el-form>


    </div>

</template>
    
<script setup lang='ts'>
import {eventBus} from "../util/eventBus"

        import { reactive, ref ,} from 'vue'
   
import { FormInstance, FormRules,ElMessage } from 'element-plus'


import {saveUserInfoApi} from "../apis/user.js"
const token=localStorage.token

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const userInfo=JSON.parse(localStorage.getItem("userInfo") as string) 
   
const ruleForm = reactive({
    account:userInfo.account,
    userGroup:userInfo.role,
    imgUrl:userInfo.imgUrl
})

const loading=ref(false)

const rules = reactive<FormRules>({
    account: [
    { required: true, message: '请输入正确的名字', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入正确的密码', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  
})

const submitForm = async (formEl: FormInstance | undefined) => {

        loading.value=true
  if (!formEl) return
  await formEl.validate((valid:any, fields:any) => {
    if (valid) {
      console.log('submit!')
      saveUserInfoApi(ruleForm)
      .then(res=>{
        loading.value=false
        console.log('res',res);
        localStorage.userInfo=JSON.stringify(ruleForm)
        ElMessage.success("更新成功")
        eventBus.emit("syncUserInfo")
        
      })
      
      .catch(err => {
                    console.log("err", err);
                    loading.value = false;
                })
    } else {
      console.log('error submit!', fields)
      loading.value=false
    }
  })
}



//上传头像

import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'



const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  
) => {
        console.log("response",response)
        if(response.code===1){
            ruleForm.imgUrl=response.data
        }
        else{
            ElMessage.error("上传失败")
        }
}



</script>
    
<style>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
    
    .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>